<template>
  <!-- 子页面的头部导航栏-->
  <view class="header" :style="style">
    <view class="flexbox" :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px'}]">
      <image class="back-img" :src="imgUrl +  'index/top-back.png'"></image>
      <view class="content" :style="[{ 'top': customTop + 'px','left': customLeft + 'px'}]">
        <view class="back-home" :style="[{'width': customWidth + 'px','height': customHeight + 'px'}]">
          <view class="icon-box">
            <uni-icons color="#000" type="back" :size="25" @click="goBack"></uni-icons>
          </view>
          <view class="line">
          </view>
          <view class="icon-box">

            <uni-icons color="#000" type="home" :size="25" @click="goIndex"></uni-icons>
          </view>
        </view>
      </view>
      <view class="text">
        {{childTitle}}
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      childTitle: {
        type: String,
        default: ''
      },
      returnIndex: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        imgUrl: this.$imgUrl,
        statusBarH: 20,
        customBarH: 70,
        contentH: 0,
        customWidth: 0, //自定义胶囊的宽度
        customHeight: 0, //自定义胶囊的高度
        customTop: 0, //自定义胶囊距离顶部的距离
        customLeft: 0, //自定义胶囊距离左侧的距离
      }
    },
    computed: {
      style() {
        let _style = `height: ${this.customBarH}px;`
        return _style
      }
    },
    methods: {
      goBack() {
        if (this.returnIndex) {
          this.goIndex()
          return
        }
        uni.navigateBack()
      },
      goIndex() {
        uni.switchTab({
          url: '/pages/index/index'
        })
      }
    },
    created() {
      let self = this;
      uni.getSystemInfo({
        success: function(e) {
          self.statusBarH = e.statusBarHeight + 10
          let screenWidth = e.screenWidth;
          // 获取用户手机胶囊的位置信息
          let custom = uni.getMenuButtonBoundingClientRect()
          self.customHeight = custom.height; //胶囊的高度
          self.customWidth = custom.width; //胶囊的宽度
          self.customTop = custom.top; //胶囊的顶部距离最顶部的距离
          self.customLeft = screenWidth - custom.right; //胶囊距离左侧的距离
          self.customBarH = custom.height + custom.top + 10
          // 将高度值传给父页面
          self.$emit('getMarginTop', self.customBarH)
          self.contentH = custom.statusBarHeight - custom.top
        }
      })
    }
  }
</script>

<style lang="scss">
  .header {
    width: 100vw;
    position: fixed;
    z-index: 999;
  }

  .flexbox {
    height: 100%;
    text-align: center;

    .back-img {
      width: 750rpx;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    .text {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .icon-box {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .content {
      position: fixed;
      display: flex;
      align-items: center;
      width: 100%;

      .back-home {
        // padding: 6rpx 16rpx;
        border: 2rpx solid #ccc;
        border-radius: 30rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .line {
          width: 2rpx;
          height: 30rpx;
          background-color: #ccc;
        }
      }
    }
  }
</style>